<template>
  <Card>
    <p slot="title">消防从业人员分布</p>
    <div class="chart" id="chart-team-staff"></div>
    <Divider />
    <span class="text">从业总人数：{{count}}人</span>
    <Spin v-show="loading" fix size="large"></Spin>
  </Card>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      option: null,
      loading: false,
      count: 0
    };
  },
  methods: {
    renderChart() {
      this.loading = true;
      axios
        .get(
          "http://114.115.153.22:3333/Interface/Methods/RedictToole/RedictPage.ashx?apiUrl=http://58.16.86.76:9999/xfweb/SysDep/getDepType"
        )
        .then(res => {
          let json = res.data;
          var chartData = [
            {
              name: "现役队",
              value: json.tcount[0][1]
            },
            { name: "微型消防站", value: json.tcount[1][1] },
            { name: "专职消防队", value: json.tcount[2][1] }
          ];
          chartData.forEach((o, i) => {
            this.count = this.count + o.value;
          });
          this.option = {
            tooltip: {
              show: true,
              trigger: "item",
              axisPointer: { type: "shadow" }
            },
            legend: {
              top: "top",
              left: "left",
              data: chartData.map(o => {
                return o.name;
              })
            },
            color: this.COLORS,
            series: [
              {
                type: "pie",
                center: ["50%", "50%"],
                radius: ["50%", "75%"],
                data: chartData,
                itemStyle: {
                  normal: {
                    shadowColor: "#00000020",
                    shadowBlur: 12,
                    shadowOffsetX: 0,
                    shadowOffsetY: 5
                  }
                },
                label: {
                  show: true,
                  position: "outside",
                  formatter: "{b}:{c}人"
                }
              }
            ]
          };
          this.$Crender("chart-team-staff", this.option);
          this.loading = false;
        });
    }
  },
  mounted() {
    this.renderChart();
  }
};
</script>

<style scoped>
.chart {
  height: 410px;
}
</style>